<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo23</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                checked: true,
                name:"",
                message:""
            }
        },
        //复选框 除了直接通过value给值，也可以用true-value false-value设定值
        //v-model 修饰符
        //.lazy修饰符  
        //普通的绑定数据会跟着文本框里的改变而改变，lazy指只有文本框失去焦点才会更新数据
        //.number修饰符
        //一般文本框传过去的值都是string类型，但是有时候只需要number类型，就可以用这个
        //注意，只要开头是数字就可以转成number类型，开头不是数字就不行
        //.trim修饰符
        //自动帮你把输入文字前后的空格删掉
        //注意，在文字中间的无法帮你删掉
        template: `
        <div>{{checked}}<input type="checkbox" v-model="checked" /></div>
        <div>{{name}}
    <input 
        type="checkbox" 
        v-model="name"  
        true-value="JSPang.com"
        false-value="技术胖"
        /></div>
        <div>
    {{message}}<input v-model.lazy="message" />
    {{typeof message}}<input v-model.number="message" />
</div>
        `

    })
    const vm = app.mount("#app")

</script>

</html>